/*
* @Author: Flora
* @Date:   2019-01-14 20:01:04
* @Last Modified by:   Flora
* @Last Modified time: 2019-01-20 19:59:20
*/

// entry :js的入口文件
// externals：外部依赖的声明
// output：目标文件
// resolve:配置别名
// module:各种loader->html,css,js,url,image

// js-loader:webpack自带

 // npm install html-webpack-plugin --save-dev
 // npm install extract-text-webpack-plugin@1.0.1 --save-dev
 // css-loader style-loader
 // npm install html-loader --save-dev

 //  npm install --save-dev url-loader@0.5.7
 // npm install --save-dev file-loader@0.11.2
 // npm install webpack-dev-server@1.16.5 --save-dev
 // npm install webpack-dev-server@1.16.5 --save-dev -g

// npm install hogan --save

let webpack = require('webpack');
// css单独打包 
// var ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 环境变量
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 获取html-webpack-plugin参数
var getHtmlConfig = function(name , title){
	return {
		template 	: './src/view/' + name + '.html',
		filename	: 'view/' +  name +'.html',
		// filename	: name + '.html',
		inject		: true,
		hash 		: true,
		chunks 		: ['common',name],
		title		: title
	}
};
let config = {
	// 4.x更新版本
	mode: 'dev' === WEBPACK_ENV ? 'development' : 'production',
	// 多入口
	entry:{
		'common'			:	'page/common/index.js',
		'index'				:	'page/index/index.js',
		'result'			:	'page/result/index.js',
		'user-login'		:	'page/user-login/index.js',		
		'user-account'		:	'page/user-account/index.js',
		'user-cart'			:	'page/user-cart/index.js',
		'publish'			:	'page/publish/index.js',
		'show'				:	'page/show/index.js',
		'edit'				:	'page/edit/index.js'
	},
	output:{
		path		:	__dirname+'/dist/',
		// publicPath	:	'/dist/',
		publicPath: WEBPACK_ENV === "dev" ? "/dist/" : "/", //请用happymmall的接口的时候用的 
		filename	:	'js/[name].js'
	},
	externals:{
		'jquery':'window.jQuery'
	},
	resolve:{
		// 别名
		alias : {
			node_modules 	: __dirname + '/node_modules',
			util 			: __dirname + '/src/util',
			page 			: __dirname + '/src/page',
			service 		: __dirname + '/src/service',
			image 			: __dirname + '/src/image'
		}
	},
	plugins:[
		// // 提取公共组件
		// new webpack.optimize.CommonsChunkPlugin({
		// 	name:'common',
		// 	filename:'js/base.js'
		// }),
		// // 打包css
		// new ExtractTextPlugin('css/[name].css'),
		new MiniCssExtractPlugin({
			// Options similar to the same options in webpackOptions.output
			// both options are optional
			filename: "css/[name].css",
			chunkFilename: "css/[id].css"
		}),
		// html模板的处理
		new HtmlWebpackPlugin(getHtmlConfig('index','首页')),
		new HtmlWebpackPlugin(getHtmlConfig('user-login','登录')),
		new HtmlWebpackPlugin(getHtmlConfig('user-account','账务')),
		new HtmlWebpackPlugin(getHtmlConfig('user-cart','购物车')),
		new HtmlWebpackPlugin(getHtmlConfig('publish','发布')),
		new HtmlWebpackPlugin(getHtmlConfig('show','商品详情')),
		new HtmlWebpackPlugin(getHtmlConfig('edit','内容编辑'))
		],
	module:{
		rules: [
		// {test:/\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},
		{
			test: /\.css$/,
			use: [
				MiniCssExtractPlugin.loader,
				"css-loader"
			]
		},
		// {
		// 	test:/.css$/,
		// 	use:["style-loader","css-loader"]
		// },
		{
			test: /\.(png|jpg|gif)$/,
			use: [{
				loader: 'url-loader',
				options: { /* * 【改动】：图片小于2kb的按base64打包 */
					limit: 2048,
					name: 'resource/[name].[ext]'
				}
			}]
		},
		{
			test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
			use: [{
				loader: 'url-loader',
				options: {
					limit: 8192,
					name: 'resource/[name].[ext]'
				}
			}]
		}, 
		{
			test: /\.string$/,
			use: {
				loader: 'html-loader',
				options: {
					minimize: true,
					removeAttributeQuotes: false
				}
			},
		}
		// 小于limit转成base64码引用，大于limit，url-loader调用file-loader处理
		// {
		// 	test:/\.(ico|gif|png|jpeg|jpg|woff|woff2|eot|ttf|svg|otf)\??.*$/,
		// 	loader:'url-loader?limit=100&name=/resource/[name].[ext]'
		// 	// loader:'url-loader?limit=100&name=./resource/[name].[ext]&publicPath=../'
		// },
		// {
		// 	test: /\.string$/,loader: 'html-loader',
		// 	query : {
		// 		minimize : true,
		// 		removeAttributeQuotes : false
		// 	}
		// }
		]
	},
	devServer: {
        port: 8866,
        inline: true,
        proxy: {
            '**/*.do': {
                target: 'http://test.happymmall.com',
                changeOrigin: true
            }
        }
    }
};

// if('dev' === WEBPACK_ENV){
// 	config.entry.common.push('webpack-dev-server/client?http://localhost:8866/');
// }
module.exports = config;